<script setup>
const props = defineProps(["menuData", "index"]);
import { useRouter } from "vue-router";
const routers = useRouter();
import { useMenuStore } from "../store/index"; // 从统一入口引入
const menuStore = useMenuStore();
// 点击菜单
const handleClick = (item) => {
  // 添加菜单
  menuStore.addMenu(item.meta);
  routers.push({
    path: item.meta.path,
  });
};
</script>

<template>
  <template
    v-for="item in props.menuData"
    :key="`${props.index}-${item.meta.id}`"
  >
    <el-menu-item
      @click="handleClick(item, `${props.index}-${item.meta.id}`)"
      :index="`${props.index}-${item.meta.id}`"
      v-if="!item.children || item.children.length == 0"
    >
      <el-icon size="20">
        <component :is="item.meta.icon" />
      </el-icon>
      <span>{{ item.meta.name }}</span>
    </el-menu-item>
    <el-sub-menu :index="`${props.index}-${item.meta.id}`" v-else>
      <template #title>
        <el-icon size="20">
          <component :is="item.meta.icon" />
        </el-icon>
        <span>{{ item.meta.name }}</span>
      </template>
      <tree-menu
        :menuData="item.children"
        :index="`${props.index}-${item.meta.id}`"
      />
    </el-sub-menu>
  </template>
</template>

<style lang="less" scoped></style>
